<template>
  <div id="login">
      <el-row>
          <el-col :span="12">
              <div>
                  <img src="../../assets/images/img_dltp.png" style="width:100%">
              </div>
          </el-col>
          <el-col :span="12">
              <div style="height:100vh;display:flex;align-items:center;">
                  <div class="login-wrap">
                    <!-- <ul class="menu-tab">
                        <li :class="{'current': item.current }" v-for="(item, index) in menuTab" :key="item.id" @click="toggleMenu(item,'ruleForm')">{{ item.txt }}</li>
                    </ul> -->
                    <div style="font-size: 24px;font-weight: 400;color: #202224;text-align:center;">
                        登录账号
                    </div>
                    <!-- 表单 -->
                    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="login-form" size="medium">
                        <el-form-item prop="phone">
                            <label>账号</label>
                            <el-input type="text" v-model="ruleForm.phone" placeholder="请输入账户" autocomplete="off"></el-input>
                        </el-form-item>
                        
                        <el-form-item prop="password">
                            <label>密码</label>
                            <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码" autocomplete="off"></el-input>
                        </el-form-item>

                        <!-- <el-form-item prop="passwords" v-show="model === 'register'">
                            <label>重复密码</label>
                            <el-input type="text" v-model="ruleForm.passwords" autocomplete="off" minlength="6" maxlength="20"></el-input>
                        </el-form-item>

                        <el-form-item prop="code">
                            <label>验证码</label>
                            <el-row :gutter="10">
                                <el-col :span="15">
                                    <el-input v-model.number="ruleForm.code" minlength="6" maxlength="6"></el-input>
                                </el-col>
                                <el-col :span="9">
                                    <el-button type="success" class="block" @click="getSms()" :disabled="codeButtonStatus.status">{{codeButtonStatus.text}}</el-button>
                                </el-col>
                            </el-row>
                            
                        </el-form-item> -->

                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')" class="login-btn block">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
              </div>
              
          </el-col>
      </el-row>
        
    </div>
</template>

<script>
import {login} from '../../api/index'
export default {
    data() {
        //用户名验证
        var validateUsername = (rule, value, callback) => {
            
            if (value === '') {
            callback(new Error('请输入账号'));
            }else {
            callback();
            }
        };
        //验证密码
        var validatePassword = (rule, value, callback) => { 
            // 过滤特殊字符
            // console.log(stripscript(value))
            // this.ruleForm.password = stripscript(value);
            value = this.ruleForm.password
            //密码正则
            if (value === '') {
            callback(new Error('请输入密码'));
            } else {
            callback();
            }
        };
        //验证重复密码
        var validatePasswords = (rule, value, callback) => { 
            if(this.model === 'login'){
                callback();
            }
            // 过滤特殊字符
            // console.log(stripscript(value))
            this.ruleForm.passwords = stripscript(value);
            value = this.ruleForm.passwords
            //密码正则
            if (value === '') {
            callback(new Error('请再次输入密码'));
            } else if (value != this.ruleForm.password) {
            callback(new Error('两次密码不一致'));
            } else {
            callback();
            }
        };
        //验证验证码
        var checkCode = (rule, value, callback) => {
                
            if (value === "") {
                    return callback(new Error('请输入验证码'));
            } else if(validateVcode(value)){
                    return callback(new Error("验证码格式有误"))
            } else{
                    callback();
            }
                
        };
         return {
            menuTab: [
                { txt: '登录', current: true, type: 'login' },
                { txt: '验证码', current: false, type: 'login' }
            ],
            model: 'login',
            ruleForm: {
                phone: '',
                password: '',
            },
            //验证码按钮状态
            codeButtonStatus: {
                status : false,
                text: "获取验证码"
            },
            //倒计时时间
            timer:'',
            rules: {
                phone: [
                    { validator: validateUsername, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePassword, trigger: 'blur' }
                ],
                passwords: [
                    { validator: validatePasswords, trigger: 'blur' }
                ],
                code: [
                    { validator: checkCode, trigger: 'blur' }
                ]
            }
         }
    },
    mounted() {
        window.addEventListener('keydown',this.keyDown);
    },
    methods: {
        toggleMenu(data,ruleForm){
            this.menuTab.forEach(elem => {
                elem.current = false
            })
            data.current = true
            this.model = data.type
            this.$refs[ruleForm].resetFields();
            this.clearcountDown()
            // console.log(this.$refs)
            
        },
        keyDown(e){
            //如果是回车则执行登录方法
            if(e.keyCode == 13){
                this.submitForm('ruleForm');
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if(valid) {
                    let param = {
                        phone:this.ruleForm.phone,
                        password:this.ruleForm.password
                    }
                    login(param).then(res => {
                        if(res.code == 0) {
                            this.$message.success(res.msg);
                            localStorage.setItem('user',JSON.stringify(res.data))
                            this.$router.push({
                                name:'index'
                            })
                        }
                    })
                }
            })
            
        },
        
        /**
         * 倒计时
         */
        countDown(number){ 
            let time = number;
            console.log(time)
           this.timer = setInterval(() => {
                time--
                if(time == 0){
                    clearInterval(this.timer)
                    this.codeButtonStatus.status = false;
                    this.codeButtonStatus.text = "重新发送"
                }else{
                    this.codeButtonStatus.text = `倒计时${time}秒`
                }
                
            },1000)
        },
        //清楚倒计时
        clearcountDown(){
            this.codeButtonStatus.status = false
            this.codeButtonStatus.text = "获取验证码"
            
            clearInterval(this.timer)
        }
    }
}
</script>

<style scoped>
#login{
    height:100vh;
    overflow: hidden;
}
.login-wrap{
    width:330px;
    margin:auto;
}
.menu-tab{
    text-align: center;
}
.menu-tab li{
        display: inline-block;
        width:88px;
        line-height: 36px;
        font-size: 14px;
        color: #fff;
        border-radius: 2px;
        cursor: pointer;
    }
 .menu-tab .current{
        background-color: rgba(0,0,0,.1);
    }
.login-form{
    margin-top:24px;
}
.login-btn{ margin-top:20px; }
.el-form-item{
        margin-bottom:12px;
    }
.login-form label{
        display: block;
        font-size: 14px;
        color: #fff;
        font-weight: normal;
    }
.login-form .block{
        display: block;
        width:100%;
    }
</style>